﻿@{
    ViewBag.Title = "MusicMashup";
    Layout = "~/Views/Shared/MusicMashupLayout.cshtml";
}
<div id="loading-files-page" data-bind="visible: loading">
    <p><img src="../../Content/img/ajax-loader.gif" /> be patient...</p>
</div>

<div id="upload-file-page" data-bind="visible: uploadPage">
    <p id="messages"></p>
    <form id="uploadForm" action="/api/song/" method="post" enctype="multipart/form-data" > 
        <label for="data" class="label">File to upload:</label>
        <input type="file" multiple="multiple" id="data" name="data" /> 
        <input type="submit" value="Upload File" />
    </form>
    <div class="progress">
        <div class="upload-bar" data-bind="css: { width: uploadPercent }"></div >
        <div class="upload-percent" data-bind="text: uploadPercent"></div >
    </div>
    <div id="upload-status" data-bind="text: uploadStatus"></div>
</div>

<div id="song-list-page" data-bind="visible: songListPage">
    <a href="#" data-bind="click: refreshClick"><img id="refresh-list" src="../../Content/img/refresh.jpg" /></a><h1 style="display: inline" >Song list contains <span data-bind="text: totalSongs"></span> songs</h1>
    <span><input type="text" data-bind="value: searchSongArrayString" /></span><span><button data-bind="click: searchSongArray">Search songlist</button></span>
    <table id="song-table" cellspacing="0" width="100%" >
        <thead>
            <tr>
                    <th><a href="#" class="actionlink" data-bind="click: sortBySong">Song</a></th>
                    <th><a href="#" class="actionlink" data-bind="click: sortByArtist">Artist</a></th>
                    <th><a href="#" class="actionlink" data-bind="click: sortByAlbum">Album</a></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
        <tbody data-bind="foreach: searchSongListArray">
            <tr data-bind="attr: { class: $parent.toggleBool() ? 'bg-first' : 'bg-second' }" >
                <td class="song-link-td">
                    <a href="#" class="song-link" data-bind="attr: {id: filename}" ><img class="play-icon" src="../../Content/img/control_play_blue.jpg" /><span data-bind="text: title" ></span></a>
                </td>
                <td  class="song-artist" data-bind="text: artist"></td>
                <td  class="song-album" data-bind="text: album"></td>
            </tr>
        </tbody>
    </table>
</div>

<div id="song-page" data-bind="visible: songPage">
		<div id="music-player" class="jp-jplayer"></div>
		<div id="jp_container_1" class="jp-audio">
			<div class="jp-type-single">
				<div class="jp-gui jp-interface">
					<ul class="jp-controls">
						<li><a href="#" class="jp-play" tabindex="1">play</a></li>
						<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
						<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
						<li><a href="#" class="jp-mute" tabindex="1" title="mute">mute</a></li>
						<li><a href="#" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
						<li><a href="#" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
					</ul>
					<div class="jp-progress">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
					<div class="jp-time-holder">
						<div class="jp-current-time"></div>
						<div class="jp-duration"></div>
						<ul class="jp-toggles">
							<li><a href="#" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
							<li><a href="#" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
						</ul>
					</div>
				</div>
				<div class="jp-no-solution">
					<span>Update Required</span>
					To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>
		</div>
        <!-- Get info from GuitarParty section -->
        <div id="search-box">
            <p>Get song info from Guitarparty.com</p>
            <input type="text" name="query" id="query" value="" data-bind="value: guitarSearchString" />
            <button id="search-button"  data-bind="click: searchGuitarParty">Get Song</button><br />
            <input type="text" name="query-artist" id="query-artist" value="" data-bind="value: guitarArtistSearchString" />
            <button id="search-artist-button" data-bind="click: searchGuitarArtist">Get Artist</button><br />
            <img src="../../Content/img/ajax-loader-small.gif" data-bind="visible: guitarLoading" />
            <p data-bind="fadeVisible: guitarSelectSongSection">
            <select data-bind="options: guitarPartyArray, 
                   optionsText: function(item) { 
                       return item.title 
                   }, 
                   value: guitarSelectedSong"></select>
                   <button data-bind="click: searchGuitarPartySingle">Get Lyrics</button>
            </p>
            <p data-bind="fadeVisible: guitarSelectArtistSection">
            <select data-bind="options: guitarPartArtistArray, 
                   optionsText: function(item) { 
                       return item.name 
                   }, 
                   value: guitarSelectedArtist"></select>
                   <button data-bind="click: searchGuitarArtistSingle">Get Artist</button>
            </p>
        </div>

        <div data-bind="fadeVisible: displaySongMessage">
            <p id="song-message" data-bind="text: songMessage"></p>
        </div>

        <! -- area for displaying the artist information -->
        <div id="song-information" data-bind="fadeVisible: guitarArtistInformation">
            <p>
                <span class="label-song-page">Artist: </span>
                <span data-bind="text: guitarArtistName"></span>
            </p>
            <p>
                <span class="label-song-page">Artist Biography: </span><br />
                <span data-bind="html: guitarArtistBio"></span>
                
            </p>
            
        </div>
            
        <!-- area for displaying the song information -->
        <div id="song-information" data-bind="fadeVisible: guitarSongInformation">
            <p>
                <span class="label-song-page">Song title: </span>
                <span data-bind="text: guitarSongName"></span>
            </p>
            <p>
                <span class="label-song-page">Song lyrics: </span>
                <span data-bind="text: guitarSongLyrics"></span>
            </p>
        </div>
</div>

<!-- virkar ekki að vista id3 tög -->
<div id="update-id3-tags" data-bind="fadeVisible: songID3SaveDisplay">
    <p id="update-tags-messages"></p>
        <div>
            <label for="title" class="label">Title:</label>
            <input type="text" id="title" data-bind="value: guitarSongName" /> 
        </div>
        <div>
            <label for="artist" class="label">Artist:</label>
            <input type="text" id="artist" data-bind="value: guitarArtistName" /> 
        </div>
        <div>
            <label for="album" class="label">Album:</label>
            <input type="text" id="album" data-bind="value: editSongAlbum"  /> 
        </div>
        <div>
            <label for="genre" class="label">Genre:</label>
            <input type="text" id="genre" data-bind="value: editSongGenre" /> 
        </div>
        <input type="hidden" data-bind="value: songFileName" />
        <input type="hidden" data-bind="value: guitarArtistUri" />
        <input type="hidden" data-bind="value: guitarSongUri" />
        <button data-bind="click: saveSongID3">Save song's ID3 Tags</button> (VIRKAR EKKI)
</div>